<template>
	<div class="pureNewLogContent accQuery realTimeCurrency" :style="{width:realTimeServiceContent}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置/流水查询/
				<span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
				<div class="block">
						<el-form :model="form" :rules="rules" ref="form" class="demo-form-inline" :inline="true">
							<div class="import">
								<el-form-item label="日期范围" :label-width="formLabelWidth">
									<el-date-picker
									v-model="form.date"
									type="daterange"
									align="left"
									placeholder="选择日期范围"
									@change='dateChange'
									:picker-options="pickerOptions">
								  </el-date-picker>
								</el-form-item>
							    <el-form-item label="平    台" :label-width="formLabelWidth" prop="platform">
							      	<el-select v-model="form.platform" filterable placeholder="请选择平台" @change = "selectPlats">
										<el-option v-for="(val,key) in form.platforms" :label="val.label" :value="val.value" :key='key'></el-option>
							      	</el-select>
							    </el-form-item>
								<el-form-item label="渠    道" :label-width="formLabelWidth" prop="channel" >
							      	<el-select v-model="form.channel" filterable placeholder="请选择渠道" @change = "selectChannels">
										<el-option v-for="(val,key) in form.channels" :label="val.label" :value="val.value" :key='key'></el-option>
							      	</el-select>
						   		</el-form-item>
								<el-form-item label="区    服	" :label-width="formLabelWidth" prop="serverid">
							      	<el-select v-model="form.serverid" filterable placeholder="请选择区服" @change = "selectServers">
										<el-option v-for="(val,key) in form.serverids" :label="val.label" :value="val.value" :key='key'></el-option>
						      		</el-select>
						    	</el-form-item>
								<el-form-item label="账号ID" :label-width="formLabelWidth" prop="userid">
									<el-input v-model="form.userid" auto-complete="off" :width="inputWidth"></el-input>
								</el-form-item>
								<el-form-item label="角色ID" :label-width="formLabelWidth" prop="roleid">
									<el-input v-model="form.roleid" auto-complete="off" :width="inputWidth"></el-input>
								</el-form-item>
								<el-form-item label="货币类型" filterable :label-width="formLabelWidth" prop='currencytype'>
							      <el-select v-model="form.currencytype" placeholder="请选择货币类型" 	@change='currencytypeChange'>
											<el-option v-for="(val,key) in form.currencytypes" :label="val.label" :value="val.value" :key='key'></el-option>
							      </el-select>
							    </el-form-item>
								<el-form-item label="消耗/获得原因" filterable :label-width="formLabelWidth" prop='reason'>
							     <el-select v-model="form.reason" placeholder="请选择原因">
											<el-option v-for="(val,key) in form.reasons" :label="val.label" :value="val.value" :key='key'></el-option>
							      </el-select>
							    </el-form-item>
						</div>
						<el-form-item  class='conmit'>
								<el-button type="primary"  icon="search" @click="search('form')" >搜索</el-button>
								<el-button @click="reset('form')">重置</el-button>
					    </el-form-item>
				  </el-form>
				</div>
			</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">查询结果</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel('流水查询-实时货币流水')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody">
					<template>
					  <el-table
					  	v-loading="loading"
    					element-loading-text="拼命加载中"
					    :data="realTimeServiceTableData"
					    border
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'time', order: 'descending'}"
					    >
					    <el-table-column sortable align="center"
					        v-for="col in realTimeServiceTableHead"
					        :prop="col.prop" :label="col.label" :width="col.width">
					    </el-table-column>
					  </el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal">
					</el-pagination>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./realTimeCurrency.styl"></style>
<script src='./realTimeCurrency.js'></script>
